<!--
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-05 11:21:20
 * @LastEditors: renmengxue
 * @LastEditTime: 2023-12-08 16:52:41
-->
<template>
  <div class="home-page">
    <h1> {{ data }}</h1>
    {{ test.total }}
    <button class="btn btn[btn-primary]" @click="updateStore">点击</button>
    <section class="py-5 text-center container">
      <div class="row py-lg-5">
        <div class="col-lg-6 col-md-8 mx-auto">
          <img src="../assets/callout.svg" alt="callout" class="w-50" />
          <h2 class="font-weight-light">随心写作，自由表达</h2>
          <p>
            <a href="#" class="btn btn-primary my-2">开始写文章</a>
          </p>
        </div>
      </div>
    </section>
    <!-- <Uploader action="/upload" :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded"
      @file-upload-error="onErrorUploaded">

      <template #uploaded="dataProps">
        <img :src="dataProps.uploadedData.data.url" width="500" />
      </template>

    </Uploader> -->
    <h4 class="font-weight-bold text-center">发现精彩</h4>
    <column-list :list="list"></column-list>
    <button class="btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25 d-block" @click="loadMorePage"
      v-if="!isLastPage">
      加载更多
    </button>
  </div>
</template>

<script lang='ts'>
import { ref, reactive, defineComponent, computed, onMounted } from 'vue'
import ColumnList from '../components/ColumnList.vue'
import { useTest2Store } from '../store/test'
import { useColumnStore } from '@/store/column'
// 从store里面获取数据
import { useStore } from 'vuex'
import { GlobalDataProps, ImageProps, ResponseType } from '@/store'
import CreateMessage from '@/components/CreateMessage'
import useLoadMore from '@/hooks/useLoadMore2'
import { storeToRefs } from 'pinia'
// import { useTestStore } from '../'
export default defineComponent({
  name: 'Home',
  components: {
    ColumnList
    // Uploader
  },
  setup() {
    const columnStore = useColumnStore()
    const testStore = useTest2Store()
    const { data } = storeToRefs(testStore)
    console.log(testStore.data)
    // 方法二
    // const selectedColumn = computed(() => testStore.getDataById('12345'))

    const store = useStore<GlobalDataProps>()
    const total = computed(() => columnStore.total)
    const currentPage = computed(() => columnStore.currentPage)
    const list = computed(() => columnStore.getColumns)
    const { loadMorePage, isLastPage } = useLoadMore(columnStore, 'fetchColumns', {
      total,
      currentPage,
      pageSize: 3
    })
    // const beforeUpload = (file: File) => {
    //   const JPG = file.type === 'image/jpeg'
    //   if (!JPG) {
    //     const message = CreateMessage('上传图片只能是JPG格式', 'error')
    //     setTimeout(() => {
    //       message.destroy()
    //     }, 2000)
    //   }
    //   return JPG
    // }
    onMounted(() => {
      columnStore.fetchColumns({
        pageSize: 3
      })
      // store.dispatch('fetchColumns', {
      //   pageSize: 3
      // })
    })
    const updateStore = async () => {
      const data = await testStore.fetchColumns()
      // testStore.data.push({ _id: '123', title: 'hello pinia', description: 'miaoshu' })
      // testStore.$patch({
      //   data: [],
      //   total: 30
      // })

      // testStore.$patch((state) => {
      //   state.data.push({ _id: '12345', title: 'hello pinia', description: 'miaoshu' })
      //   state.total = 20
      // })
      // 请空初始值
      // testStore.$reset()
      // testStore.$subscribe((mutation, state) => {
      //   console.log('sub', mutation, state)
      // })
      // testStore.increaseTotal()
    }

    // const onFileUploaded = (rawData: ResponseType<ImageProps>) => {
    //   CreateMessage(`上传图片id${rawData.data._id}`, 'success')
    // }
    // const onErrorUploaded = (message: any) => {
    //   CreateMessage(`上传图片失败${message}`, 'error', 2000)
    // }
    return {
      list,
      // beforeUpload,
      // onFileUploaded,
      // onErrorUploaded
      loadMorePage,
      isLastPage,
      test: testStore,
      updateStore,
      data

    }
  }

})

</script>
